<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>{stl.sitename} | 搜索</title>
    <stl:include file="/include/head.html"></stl:include>
    <link rel="stylesheet" type="text/css" href="/courseware/css/center.css" />
	<link rel="stylesheet" type="text/css" href="/courseware/css/icono.min.css" />
</head>
<body>
	<div class="search">
		<div class="content">
			<stl:include file="/include/header.html"></stl:include>
			<div class="wrapper">
				<div class="container">
					<div class="row">
						<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
							<form>
                                <div class="form-group">
                                    <input type="text" class="form-control" id="txtSearch" placeholder="请输入课程名称...">
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-lg btn-primary btn-block" type="button" id="btnSearch">搜索</button>
                                </div>
                            </form>
						</div>
					</div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                            <ul id="results"></ul>
                            <div class="message"></div>
                        </div>
                    </div>
				</div>
			</div>
		</div>
	</div>

    <stl:include file="/include/bottom-bar.html"></stl:include>
	<stl:include file="/include/bottom.html"></stl:include>
	<script>
		$("#nav-index").removeClass('active');
		$("#nav-login").addClass('active');

		$(document).ready(function(){

            var instance = axios.create({
              headers: {'X-SS-API-KEY': '8a0471e9-c527-4d57-99a1-6daec32bb629'}
            });

            $("#btnSearch").click(function(){

                var _query = $("#txtSearch").val();
                instance.get('/eduonline/api/coursewares/search?query=' + _query)
                    .then(function(response){
                        $("#results").empty();
                        $(".message").empty();

                        if(response.data.length > 0){
                            $(response.data).each(function(index, item){
                                $("#results").append("<li><div class=\"h_thumbnail\" style=\"background-image: url(\'" + "/courseware" + item.imageUrl + "\')\"></div><a href=\"/courseware/contents/" + item.channelId + "/" + item.id + ".html\">" + item.title + "</a></li>");
                            });
                        }else{
                            $(".message").html("对不起,没有找到符合条件的结果");
                        }
                        
                    }).catch(function (error){
                        console.log(error.response.data.message);
                    });
            });
            
        });
	</script>
</body>
</html>